<template>
  <div class="textMore-box">
    <div class="Span" ref="Span"></div>
    <div
      class="DomHeight"
      ref="DomHeight"
      :style="{ fontSize: props.fontSize + 'px' }"
      v-html="getTextHtml(props.data)"
    ></div>

    <div
      class="omission"
      ref="omission"
      v-if="isBtn"
      :style="{
        height: props.maxheight + 'rem',
        '-webkit-line-clamp': props.row,
        fontSize: props.fontSize + 'px',
      }"
    >
      {{ props.data }}
    </div>
    <div
      class="omission"
      :style="{
        fontSize: props.fontSize + 'px',
      }"
    ></div>
    <div v-if="isBtn" class="openText">
      <span @click="lookAll">点击阅读全文</span>
    </div>

    <div class="warp" v-if="!isBtn">
      <div class="expansion">
        <div
          class="text"
          ref="Text"
          :style="{ fontSize: props.fontSize + 'px' }"
          v-html="getTextHtml(props.data)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" >
export default defineComponent({
  name: 'textMode',
});
</script>

<script lang="ts" setup>
import { getDraggableNumber } from '@/utils/getRemComputed';
import { filterHTML, getTextHtml } from '@/utils/minxin';
import { publicUrls } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { ElText } from 'element-plus';
import {
  computed,
  defineComponent,
  ref,
  onMounted,
  watch,
  nextTick,
  onUnmounted,
  onActivated,
  onDeactivated,
} from 'vue';
const Span = ref();
const store = useProjectStore();
const isExpansion = ref(true);
const Text = ref();
const DomHeight = ref();
const omission = ref();
const isBtn = ref(true);
const textStr = ref('');
const timer = ref(null);
const modelShow = ref(false);
const widthLoop = ref(true); //刷新状态
const props = defineProps({
  data: {
    type: String, //文本内容
    default: '',
  },
  btnColor: {
    type: String, // 按钮颜色
    default: '#fff',
  },
  title: {
    type: String, // 标题
    default: '',
  },
  maxheight: {
    type: Number, // 最大高度 单行高度0.2361rem
    default: 0.71,
  },
  row: {
    type: Number, // 展示行数
    default: 3,
  },
  fontSize: {
    type: Number, // 字体大小
    default: 20,
  },
});

const emit = defineEmits(['Top']);
watch(
  () => isExpansion.value,
  () => {
    if (isExpansion.value) return;
  },
);
watch(
  () => props.data,
  () => {
    isExpansion.value = true;
  },
);
const UpCallback = () => {
  isExpansion.value = true;

  Span.value.scrollIntoView();
  try {
  } catch {
    console.log('未传置顶事件');
  }
};

onUnmounted(() => {
  clearInterval(timer.value);
});

timer.value = setInterval(() => {
  // 判断虚拟文本dom是否高于容器dom
  if (!props.data) {
    isBtn.value = false;
    return;
  }
  let remNumber = getDraggableNumber(props.maxheight);

  if (DomHeight.value && DomHeight.value.offsetHeight > remNumber) {
    isBtn.value = true;

    clearInterval(timer.value);
  } else {
    isBtn.value = false;
  }
}, 500);
const gettext = computed(() => {
  textStr.value = filterHTML(props.data);
});

const lookAll = () => {
  store.setRemark(props.data, props.title);
  store.setChildRemarksShow(true);
};
const mousewheelStop = (event: any) => {
  // event.preventDefault(); // 阻止事件的默认行为
};
onMounted(() => {
  // 监听内容动态切换，重新判断高度
  watch(
    () => props.data,
    () => {
      textStr.value = filterHTML(props.data);
      isBtn.value = true;
      clearInterval(timer.value);
      timer.value = setInterval(() => {
        if (!props.data) {
          isBtn.value = false;
          return;
        }
        //判断虚拟文本dom是否高于容器dom
        let remNumber = getDraggableNumber(props.maxheight);
        if (DomHeight.value.offsetHeight > remNumber) {
          isBtn.value = true;
          clearInterval(timer.value);
        } else {
          isBtn.value = false;
        }
      }, 500);
    },
  );
});
</script>

<style lang="less" scoped>
.textMore-box {
  position: relative;
  width: 100%;
}
.PackUp {
  display: flex;
  justify-content: center;
  text-indent: 0em !important;
  font-size: 16px;
  line-height: 28px;

  :deep(.t-icon) {
    transform: translateY(-2px);
  }
  span {
    font-family: Microsoft YaHei;
  }
}
.openText {
  cursor: pointer;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: flex-end;

  span {
    font-size: 16px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #6b5543;
    line-height: 32px;
    text-decoration: underline;
  }
  // position: absolute;
  // bottom: 0px;
}
.DomHeight {
  display: flex;
  flex-direction: column;
  width: 100%;

  z-index: -4;
  position: absolute;
  opacity: 0;
  // font-size: 20px;
  font-weight: 400;
  text-indent: 0.5em;
  color: #ffffff;
  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
  line-height: 32px;
  width: 100%;
  text-align: justify;
  :deep(p) {
    text-align: justify;
    font-family: PingFang SC, Microsoft YaHei, Arial Regular;
    text-indent: 0.5em;
    color: #ffffff;
    font-weight: 400;
    color: #ffffff;
    font-family: PingFang SC, Microsoft YaHei, Arial Regular;
    line-height: 32px;
    // font-size: 20px;
  }
  :deep(p:last-of-type) {
    margin-bottom: 0px !important;
  }
  :deep(p) {
    font-family: PingFang SC, Microsoft YaHei, Arial Regular;
    text-indent: 2em;
    color: #ffffff;
    font-weight: 400;
    color: #ffffff;
    font-family: PingFang SC, Microsoft YaHei, Arial Regular;
    line-height: 32px;
    font-size: 20px;
  }
  :deep(span:last-of-type) {
    margin-bottom: 0px !important;
  }
}

.warp {
  display: flex;
  text-align: justify;
}

.text {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-indent: 2em;
  font-size: 20px;
  line-height: 200%;
  :deep(*) {
    text-indent: 0.5em;
    font-family: PingFangSC;
    // font-size: 16px;
    font-weight: 400;
    line-height: 200%;
    text-align: left;
    color: rgba(50, 43, 37, 1);
  }
  :deep(span:last-of-type) {
    margin-bottom: 0px !important;
  }
}

.omission {
  width: 100%;
  display: -webkit-box;
  flex-direction: column;
  font-size: 16px;
  line-height: 200%;
  text-align: justify;
  text-indent: 2em;
  color: #000;
  -webkit-line-clamp: 3; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  :deep(span) {
    // display: flex;
    font-size: 16px;
    line-height: 200%;
    font-family: PingFang SC, Microsoft YaHei, Arial Regular;
    margin-bottom: 10px;
    text-indent: 2em;
  }
  :deep(span:last-of-type) {
    margin-bottom: 0px !important;
  }
}
:deep(.flot-box) {
  float: right;
}
</style>
